<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>摊销</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>
<style type="text/css">
	.layui-table-click{
	    background-color:#ddf2e9 !important;
	}
	.layui-form-label{
		width:120px
	}
</style>
</head>
<body>
	
<div class="x-nav">
	<span class="layui-breadcrumb">
		<a href="">首页</a>
		<a>
		  <cite>摊销</cite>
		</a>
	</span>
</div>	

<!-- 顶部搜索框 -->
<div class="x-body">

	<div class="layui-row">
		<form class="layui-form layui-col-md12" onsubmit="return false">

			<div class="layui-input-inline" style="width: 165px">
				<select name="keyword1" id="keyword1">
					<c:forEach items="${warehouseList}" var="warehouse">
						<option value="${warehouse.id}">${warehouse.warehouse_name}</option>
					</c:forEach>
				</select>
			</div>
			<input type="hidden" id="dateTime">

			<div class="layui-input-inline" style="width: 150px">
				<input class="layui-input"name="keyword02" id="keyword02"  style="width: 150px">
			</div>
			<%--<input type="text" name="keyword2" id="keyword2" placeholder="请输入备注" autocomplete="off" class="layui-input">
            <input type="text" name="keyword3" id="keyword3" placeholder="请输入SAP/QAD" autocomplete="off" class="layui-input">
            <input type="text" name="keyword4" id="keyword4" placeholder="请输入中文名称" autocomplete="off" class="layui-input">--%>
			<button class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
		</form>
	</div>

 	<!-- 头部按钮 -->
	<xblock>
		<button id="add" class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-add-circle-fine"></i>新增</button>
		<button id="dels" class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"></i>删除</button>
 	</xblock>
   	<!-- 列表 -->
 	<table class="layui-hide" id="tableOne" lay-filter="tableOne"></table>
</div>

<div id="addPrepaidExpenses" hidden="hidden">
	<form class="layui-form" id="prepaidExpensesFormId">
		<xblock>
			<br>
			<table>
				<tr>
					<td><input type="hidden" id="prepaidExpensesId" name="id"></td>
				</tr>
				<tr>
					<td><label class="layui-form-label">发生日期</label></td>
					<td>
						<div class="layui-input-inline">
							<input class="layui-input" id="dateOfOccurrence" name="dateOfOccurrence" lay-verify="dateOfOccurrence" style="width: 190px">
						</div>
						<div class="layui-inline" style="margin-top: 10px;">
							<span style="color:red; font-size: 24px; margin-left: 10px">*</span>
					    </div>
					</td>
				</tr>
				<tr style="height: 20px"></tr>
				<tr>
					<td><label class="layui-form-label">费用明细</label></td>
					<td>
						<div class="layui-input-inline">
							<input class="layui-input" id="cost" name="cost" lay-verify="cost" style="width: 190px">
						</div>
						<div class="layui-inline" style="margin-top: 10px;">
							<span style="color:red; font-size: 24px; margin-left: 10px">*</span>
					    </div>
					</td>
				</tr>
				<tr style="height: 20px"></tr>
				<tr>
					<td><label class="layui-form-label">金额</label></td>
					<td>
						<div class="layui-input-inline">
							<input class="layui-input" id="money" name="money" lay-verify="money" style="width: 190px">
						</div>
						<div class="layui-inline" style="margin-top: 10px;">
							<span style="color:red; font-size: 24px; margin-left: 10px">*</span>
					    </div>
					</td>
				</tr>

				<tr style="height: 20px"></tr>
				<tr>
					<td><label class="layui-form-label">摊销规则：</label></td>
					<td>
						<span style="color: red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;500以下----3个月</span><br/>
						<span style="color: red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;500-3000----6个月</span><br/>
						<span style="color: red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3000以上----12个月</span>
					</td>
				</tr>
			</table>
		</xblock>
		<xblock>
			<button class="layui-btn layui-btn-blue" lay-submit lay-filter="prepaidExpensesForm" style="margin-left:130px; margin-bottom: 10px">提交</button>
			&emsp;&emsp;&emsp;&emsp;<button class="layui-btn layui-btn-primary" style="margin-bottom: 10px">取消</button>
		</xblock>
	</form>
</div>
	
<script type="text/javascript">
       var table;
       var a = 0;
	layui.use(['table','layer','upload','form','laydate'], function(){
		table = layui.table;
		var layer = layui.layer;
		var form = layui.form;
		var laydate = layui.laydate;
		var $ = layui.jquery, active = {
			reload:function () {
				var keyword1 = $("#keyword1").val();

				var keyword02 = $("#keyword02").val()+"-01";

                if (keyword02.length < 9) {
                    var time = new Date();
                    var day = ("0" + time.getDate()).slice(-2);
                    var month = ("0" + (time.getMonth() + 1)).slice(-2);
                    var today = time.getFullYear() + "-" + (month) + "-01";

                    keyword02 = today;
                }


				table.reload('tableOneId',{
					method:'get',
					where:{
						"warehouseId":keyword1,
						"dateOfOccurrence":keyword02}
					,page: {
	                    curr: 1//重新从第 1 页开始
	                }
				});
			}
		}
		$('.layui-btn').on('click', function(){
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
		
		//日期控件
		laydate.render({
		  	elem: '#keyword02',
			type: 'month',
			value: new Date(),
			done:function(value, date, endDate) {
				$('#dateTime').val(value);
			}
		});
		
		//日期控件
		laydate.render({
		  elem: '#dateOfOccurrence'
		});
		
		//监听复选框事件，被选中的行高亮显示
	    table.on('checkbox(tableOne)', function(obj){
	    	if(obj.checked == true && obj.type == 'all'){
		        //点击全选
		        $('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
		    }else if(obj.checked == false && obj.type == 'all'){
		        //点击全不选
		        $('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
		    }else if(obj.checked == true && obj.type == 'one'){
		        //点击单行
			    if(obj.checked == true){
			          obj.tr.addClass('layui-table-click');
			    }else{
			          obj.tr.removeClass('layui-table-click');
			    }
		    }else if(obj.checked == false && obj.type == 'one'){
		        //点击全选之后点击单行
		        if(obj.tr.hasClass('layui-table-click')){
		        	obj.tr.removeClass('layui-table-click');
		        }
		    }
	    }); 
        
        //点击行checkbox选中
	   	$(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
	        var index = $(this).attr('data-index');
	        var tableBox = $(this).parents('.layui-table-box');
	        //存在固定列
	        if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
	            tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
	        } else {
	            tableDiv = tableBox.find(".layui-table-body.layui-table-main");
	        }
	        var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
	        if (checkCell.length>0) {
	            checkCell.click();
	        }
	    });
	
	    $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
	        e.stopPropagation();
	    });

		var keyword1 = $("#keyword1").val();

		var keyword02 = $("#keyword02").val()+"-01";

		if (keyword02.length < 9) {
			var time = new Date();
			var day = ("0" + time.getDate()).slice(-2);
			var month = ("0" + (time.getMonth() + 1)).slice(-2);
			var today = time.getFullYear() + "-" + (month) + "-01";

			keyword02 = today;
		}
	    
		/* 列表 */
		table.render({
			elem: '#tableOne'
			,url:'${pageContext.request.contextPath }/amoeba/getAmortizationList.do'
			,title: '摊销列表'
			,id :'tableOneId'
			,totalRow:true
			,where:{
				"warehouseId":keyword1,
				"dateOfOccurrence":keyword02}
			,limits:[10,100,1000]
			,toolbar: '#toolbarDemo'
			,cols: [[
				{type: 'checkbox', fixed: 'left'},
				{field:'id',title:'序号',sort: true,width: 60,type:'numbers',align:'center'},
				{field:'warehouseName', title:'仓库名称', align:'center'},
				{field:'cost', title:'费用明细', align:'center'},
				{field:'money', title:'金额', align:'center', totalRow:true},
				{field:'dateOfOccurrence', title:'发生日期', align:'center'},
				{field:'duringOfPrepaid', title:'待摊期间', align:'center'},
			  	{field:'amortizationIn', title:'摊销月份', align:'center'},
			 	{field:'amortizationCost', title:'每月摊销金额', align:'center', totalRow:true},
   				{field:'amortiztionInCurrentMonth', title:'当前月摊销金额', align:'center', totalRow:true},
			  	]]
			,page: true
            ,request: {   //如果无需自定义请求参数，可不加该参数
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {   //如果无需自定义数据响应名称，可不加该参数
                countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
			,done : function(){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
            }
		});
		
		//新增
       	$("#add").click(function(){
           	//时间戳
       		var timestamp = (new Date()).getTime();
       		layer.open({
				type: 1 				//Page层类型
				,area: ['470px', ''] 	//宽  高
				,title: '新增'
				,shade: 0.1 			//遮罩透明度
				,shadeClose: true 		//点击遮罩关闭
				,maxmin: true 			//允许全屏最小化
				,anim: 1 				//0-6的动画形式，-1不开启
				,content: $('#addPrepaidExpenses')
				,success: function () {
					document.getElementById("prepaidExpensesFormId").reset();
					$("#prepaidExpensesId").val("")
				}
				,end: function () {
					var formDiv = document.getElementById('prepaidExpensesFormId');
					formDiv.style.display = '';
					layer.close();
				}
			});
       	});
		
       	/**
         * 表单校验
         */
        form.verify({
            //value：表单的值、item：表单的DOM对象
            dateOfOccurrence: function(value, item){
                if(value.trim() == ''){
                    return '发生日期不能为空';
                }
            },
            cost: function(value, item){
                if(value.trim() == ''){
                    return '费用明细不能为空';
                }
            },
            money: function(value, item){
                var val = value.trim();
            	if(val == ''){
                	return '金额不能为空';
                }else{
                	var verify = /^[0-9.]*$/;
                	if(!verify.test(val)){
                		return '格式不正确，请输入数字和.';
                    }
                }
            }
        });
		
        form.on('submit(prepaidExpensesForm)', function(data){
			var dateOfOccurrence = $('#dateOfOccurrence').val();
        	var cost = $('#cost').val();
			var money = $('#money').val();
        	$.ajax({
				url : '${pageContext.request.contextPath}/LlmPrepaidExpenses/insert.do',
				data: {dateOfOccurrence:dateOfOccurrence, cost:cost, money:money},
				cache : false,
				type : "get",
			}).done(
				function(res) {
					if (res > 0) {
						toastr.success('新增成功！');
					}else{
						toastr.error('新增失败！');
					}
				}
			).fail(
				function(res) {
					toastr.error('新增失败！');
				}
			)
			setTimeout(function(){
				location.reload();
			},1000);
			return false;
		})
	});
	
	$('#dels').click(function(obj){
    	var rowData = table.checkStatus('tableOneId');
		var data = rowData.data;
    	var str = "";
    	if(data.length == 0){
    		toastr.warning("请至少选择一条记录！");
    	}else{
    		for(var i=0;i<data.length;i++){
        		str += data[i].id;
        		if(i != data.length-1){
        			str += ",";
        		}
        	}
    		layer.confirm('确定删除吗？', function(index){
				$.ajax({
			    	type:'post',
			    	url:'${pageContext.request.contextPath }/LlmPrepaidExpenses/delete.do',
			    	data:{"ids":str},
			    	dataType : "json",
			    	success:function(data){
			    		if(data>0){
			    			toastr.success("删除成功！");
			    		}else{
			    			toastr.error("删除失败！");
			    		}
		    			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
							//关闭模态框
							// 父页面刷新
							window.location.reload();
						},1000);
			    	}
			    })
		    	//layer.close(index);
			});
    	}
	});
	toastrStyle()
</script>	

</body>
</html>